<template>
	<div ref="mgrDialog" class="dialog-wrap">
		  
		<el-dialog 
			:title="headerTitle" 
			width="40%"
			@close="resetDialog" 
			:visible.sync="DialogVisible"
		>
			
			<el-row :gutter="20">

				<el-form 
					v-if = "editForm != null"
					ref="dialogForm"
					:rules="rules"
					size="mini"
					:label-width="formLabelWidth"
					:model.sync="editForm">
					
					<el-col :span="22">
						<el-form-item label="供应商代号" prop="cusNo">
		      				<el-input v-model="editForm.cusNo" autocomplete="off" placeholder="请输入供应商代号"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="22">	
		    			<el-form-item label="供应商名称" prop="name">
		      				<el-input v-model="editForm.name" autocomplete="off" placeholder="请输入供应商名称"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="22">	
		    			<el-form-item label="视频介绍" prop="videoIntro">
		      				<el-input v-model="editForm.videoIntro" autocomplete="off" placeholder="请输入视频介绍"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="22">	
		    			<el-form-item label="类别" prop="cusType">
							<el-input value="厂商" autocomplete="off" disabled></el-input>
			    			<!-- <el-select v-model="editForm.cusType" placeholder="请选择类别" disabled>
							   
                                <el-option
							      label="厂商"
							      value="2">
							    </el-option>
							</el-select> -->
						</el-form-item>
		    		</el-col>
				</el-form>
			</el-row>
			
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="confirm">确定</el-button>
			    <el-button size="mini" type="danger" @click="cancel">取消</el-button>
			</div>	
		</el-dialog>

    <!--加载高德地图-->
	<map-dialog
        v-if="editForm != null"
        :local="editForm.location"
        :showMap="showMapDialog"
        @cancel="cancelMap"
        @setLocal="setLocal"
      ></map-dialog>
	</div>
</template>


<script>
import { getRolesTree,getRoleTreeList } from "@/api/admin/roles"
import { getUserInfo,alterAvatar } from "@/api/user"
import { convertDataToTree } from "@/utils/util"
import InputTree from "@/components/InputTree"
import MapDialog from "@/components/agriculture/equipment/mapDialog.vue"
import { baseUrl } from '@/config/env';
import { getToken } from '@/utils/auth'
//上传图片
const uploadUrl = baseUrl+'/rest/common/upload';
export default{
	props:{
		//新增还是编辑
	    type:{
	      type:[Number,String],
	      defalut:1
	    },
		visible:{
			type:Boolean,
			default:false
		},
		form:{
			type:Object,
			default:null
		}
	},
	components:{
		InputTree,
		MapDialog
  	},
	watch:{
		form(newVal,oldVal){
			if(newVal != null){
				this.editForm = JSON.parse(JSON.stringify(newVal));
			}else{
                //this.editForm = this.defaultForm;
                this.editForm.name = "";
                this.editForm.cusNo = '';
                this.editForm.cusType = '2';
                this.editForm.videoIntro = ''
			}	
		},
		type(newVal,oldVal){
	      	if(newVal == 1){
				this.headerTitle = "新增供应商";
	      	}else if(newVal == 2){
	        	this.headerTitle = "修改供应商"
	      	}
	    },
	    visible(val){
	    	this.DialogVisible = val;
	    	if(this.form === null){
	    		this.editForm = this.defaultForm;
	    	}
	    }
	},
	data(){
		return{
			baseUrl:baseUrl,
			uploadHeaders:{'Authorization':'Bearer ' + getToken()},
			uploadUrl:uploadUrl,
			showMapDialog: false,
			addPic:require("@/assets/farm/images/add-pic_08.jpg"),
			headerTitle:"新增供应商",
			DialogVisible:false,
			editForm:null,
			defaultForm:{
				name:'',
				cusNo: "",
                cusType: "",
                videoIntro: ""
			},
			roleTree:[],
			lots:[{
				label:'响水沟村',
				value:1
			},{
				label:'大夼',
				value:2
			},{
				label:'龙头湖',
				value:3
			}],
			testEquipmentGroup:[
				{
					checked: true, 
					iconSkin: null, 
					id: 0, 
					name: "根目录", 
					open: true, 
					pId: 0
				},
				{
					checked: null, 
				 	iconSkin: null, 
				 	id: 1, 
				 	name: "继电器设备", 
				 	open: true, 
				 	pId: 0
				},
				{
					checked: null, 
				 	iconSkin: null, 
				 	id: 2, 
				 	name: "采集设备", 
				 	open: true, 
				 	pId: 0
				}
			],
			roleTreeProps:{
        		children: 'childrenNodes',
        		label: 'name',
        		value: 'id'
      		},
			formLabelWidth:'100px',
			//验证规则
		    rules:{
		        name:[{required:true,message:"请输入供应商名称",trigger:"blur"}],
		        cusNo:[{required:true,message:"请输入供应商编号",trigger:"blur"}],
		        // phone:[{required:true,message:"请输入联系方式",trigger:"blur"}],
		        // crop:[{required:true,message:"请输入种植作物",trigger:"blur"}],
		        // lot:[{required:true,message:"请选择地段",trigger:"blur"}],
		        //address:[{required:true,message:"请输入农场地址",trigger:"blur"}],
		    },
		}
	},
	mounted(){
		this.getRoleTree();
	},
	methods:{
		//上传图片
		uploadPic(){
		    const uploadBtn = window.document.getElementById("uploadPic");
          	uploadBtn.click();
		},
		//上传图片成功
		handleAvatarSuccess(res,file){
			console.log("---上传头像成功----")
			console.log(res);
			var fileId = res.data.fileId;
			alterAvatar(fileId).then((res)=>{
				console.log("------修改头像成功-------")
				console.log(res);
				if(res.data.code == 200){
					//请求新用户信息
					// this.$store.dispatch('user/GetUserInfo');
					this.editForm.image = fileId;
				}
			})
		},
		showMap() {
		    this.showMapDialog = true;
		},
		cancelMap() {
		    this.showMapDialog = false;
		},
		setLocal(data, address) {
			this.showMapDialog = false;
			this.editForm.location.P = data.P;
			this.editForm.location.Q = data.Q;
			this.editForm.location.address = address;
			this.editForm.address = address;
			this.editForm.location;
			//this.confirm(true);
		},

		
		//获取树形菜单
		getRoleTree(){

			getRoleTreeList().then((res)=>{
				console.log("-----------获取树形菜单-----------")
				console.log(res);
				//this.roleTree = convertDataToTree(res.data);
				this.roleTree = convertDataToTree(this.testEquipmentGroup)
			})

		},
		resetDialog(){
			this.DialogVisible = false;
			this.editForm = null;
			this.$emit('cancel')
		},
		//上级角色选择
		roleSelect(data){
			this.editForm.pid = data.id;
		},
		//取消按钮
		cancel(){
			this.DialogVisible = false;
			this.editForm = null;
			this.$emit('cancel')
		},
		confirm(){
			this.$refs.dialogForm.validate((valid)=>{
		        if (valid) {
		          this.DialogVisible = false;

		          if(this.editForm.pid === 0){
		          	this.editForm.pid = '0';
		          }
                  this.editForm.cusType = '2'
		          this.$emit('confirm',{type:this.type,data:this.editForm});

		        } else {
		           
		            return false;
		        }

      		})
		}

	}
}


</script>

<style scoped>
	.with-full{
	    width:100%!important;
	}
	.mapIcon {
		font-size: 20px;
		color: green;
		float: right;
		position: relative;
		top: -24px;
		cursor: pointer;
	}
</style>